<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>axios中断请求</title>
		<script type="text/javascript" src="./js/axios.min.js"></script>
	</head>
	<body>
		<button onclick="getHello()">获取欢迎信息</button>
		<button onclick="off()">中断请求</button>

		<script type="text/javascript" >
			const {CancelToken,isCancel} = axios
			let cancel

			function getHello (){
				axios({
					url:'http://localhost:5000/hello',
					params:{delay:1000},
					cancelToken:new CancelToken(c => guanbi = c ),
				}).then(
					response => {console.log('响应成功了',response.data)},
					error => {
						//请求超时、请求配置错误、请求被中断，都会走这个回调
						if(isCancel(error)) console.log('请求被中断了，原因是',error.message)
						else onsole.log('响应失败了',error.message)
					}
				)
			}

			function off(){
				cancel('不想要这个数据了')
			}
		</script>
	</body>
</html>